<template>
	<view>
		<u-row class="txtbox" customStyle="margin: 25rpx">
			<u-col span="6">
				幻体照片
			</u-col>
			<u-col span="6">
				<view class="moretxt" @click="mores(1)">查看全部></view>
			</u-col>
		</u-row>
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
			<view class="sh" v-for="(item,index) in imglist">
				<u--image width="220rpx" height="220rpx" :src="item.url" mode="scaleToFill"
					@click="ckimg(item.url,1)"></u--image>
				<!-- <image ></image> -->
			</view>
		</scroll-view>
		<u-row class="txtbox" customStyle="margin: 25rpx">
			<u-col span="6">
				幻体视频
			</u-col>
			<u-col span="6">
				<view class="moretxt" @click="mores(2)">查看全部></view>
			</u-col>
		</u-row>
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
			<view class="sh" v-for="(item,index) in list">
				<u--image width="220rpx" height="220rpx" :src="item.picUrl" mode="scaleToFill"
					@click="ckimg(item.url,2)"></u--image>
				<!-- <image ></image> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				imglist: [],
			}
		},
		onShow() {
			this.API_img()
			this.API_viedo()
		},
		methods: {
			ckimg(url, type) {
				uni.navigateTo({
					url: '/pages/mine/viedo?type=' + type + '&srcs=' + url
				})
			},
			mores(type) {
				uni.navigateTo({
					url: '/pages/mine/huantiMore?type=' + type
				})
			},
			API_img() {
				var that = this;
				that.ran
					.request('/app-api/system/user-model-media/page?pageNo=1&pageSize=10&type=IMAGE', {}, 'GET')
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							that.imglist = res.data.list;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
			API_viedo() {
				var that = this;
				that.ran
					.request('/app-api/system/user-model-media/page?pageNo=1&pageSize=10&type=VIDEO', {}, 'GET')
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							that.list = res.data.list;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
		}
	}
</script>

<style lang="scss">
	.txtbox {
		padding: 25rpx;
	}

	.moretxt {
		text-align: right;
		color: #666;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 700rpx;
		padding: 25rpx;

		.sh {
			display: inline-block;
			padding-right: 20rpx;
		}

		image {
			width: 213rpx;
			height: 213rpx;
			display: block;
			// width: 100%;
		}
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.photoList {
		margin-left: 20rpx;
		overflow: hidden;
		margin-top: 50rpx;

		.photo {
			width: 213rpx;
			height: 213rpx;
			margin-left: 20rpx;
			overflow: hidden;
			float: left;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			image {
				width: 213rpx;
				height: 213rpx;
				display: block;
				// width: 100%;
			}
		}
	}
</style>